<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 分别使用ES5的原型链继承 和 ES6的Class类继承完成下面要求：
        // 父：动物(Zoon) 内有属性：name和color  方法：eat()
        // 子：狗(Dog)继承动物(Zoon)  内有属性：name、color和age 方法: say()
        // 实例化 Dog，并调用 eat()和say()方法测试：

        // ES5的原型链继承
        // 定义Zoon构造函数
        function Zoon(name, color){
            this.name = name;
            this.color = color;
        }
        // 在Zoon构造函数的原型对象上添加方法
        Zoon.prototype.eat = function(){
            return this.name + "爱吃零食！";
        }

        // 定义Dog构造函数
        function Dog(name, color, age){
            Zoon.call(this, name, color);
            this.age = age;
        }
        
        // 通过原型链让Dog去继承Zoon
        // 改变Dog的原型对象为Zoon的对象，实现继承关系
        Dog.prototype = new Zoon();
        Dog.prototype.constructor = Dog;

        // 在Dog构造函数的原型对象添上加方法
        Dog.prototype.say = function(){
            return this.name + "爱 旺旺！";
        }

        // 测试
        const dog = new Dog("大黄","黄色", 3);
        console.log(dog);
        console.log(dog.eat());
        console.log(dog.say());


        // ES6的Class类继承
        class Zoon2{
            constructor(name, color){
                this.name = name;
                this.color = color;
            }
            
            eat(){
                return this.name + "爱吃零食！";
            }
        }
        class Dog2 extends Zoon2{
            constructor(name, color, age){
                // 此处super代表的是父类Zoon，
                super(name, color);
                this.age = age;
            }
            say(){
                return this.name + "爱 旺旺！";
            }
        }
        // 测试
        const dog2 = new Dog2("大黄","黄色", 3);
        console.log(dog2);
        console.log(dog2.eat());
        console.log(dog2.say());
    </script>

</body>
</html>